<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客户预定</title>
    <style>
        .c{
            height: 800px;
            width: 1200px;
            margin: 0 auto;
        }
        .ca{
            height: 800px;
            width: 400px;
            float: left;
        }
        .cb{
            height: 800px;
            width: 800px;
            float: right;
        }
        .caa{
            height: 300px;
            width: 400px;
            background-image: url("img/2 .jpg");
        }
        .cab{
            height: 500px;
            width: 400px;
            background: #FFFFFF;
            opacity: 0.6;
        }
        .caba{
            height: 100px;
            width: 399px;
            float: left;
            margin: 0px auto;
            text-align: center;
            font: 48px 楷体;
            line-height: 100px;
            border: 1px solid grey;
            border-right: 0;
        }
        .cabb{
            height: 397px;
            width: 399px;
            float: left;
            margin: 0 auto;
            text-align: center;
            border: 1px solid grey;
            border-right: 0px;
            border-top: 0;

        }
        .cba{
            width: 799px;
            height: 148px;
            float: left;
            text-align: center;
            line-height: 35px;
            border: 1px solid grey;
        }
        .cbaa{
            width: 799px;
            height: 50px;
            font: 40px 楷体;
        }
        .cbab{
            width: 799px;
            height: 40px;
        }
        .cbac{
            width: 799px;
            height: 30px;
        }
        .cbb{
            width: 800px;
            height: 649px;
            float: left;
            text-align: center;
            border: 1px solid grey;
            border-top: 0;
            line-height:90px;
        }
        .cbba{
            font: 50px 楷体;
            letter-spacing:20px;
            text-align: center;
            float: contour;
            margin: 0 auto;
        }
        .cbbb{
            float: contour;
            margin: 0 auto;
            font-size: 24px;
        }
    </style>
    <link rel="stylesheet" th:href="@{css/sy.css}">
</head>
<body>
<!--页头-->
<div th:insert="~{hotel_common/commons::nav}"></div>
<!--内容-->
<div class="c">
    <form action="">
        <div class="ca">
            <div class="caa"></div>
            <div class="cab">
                <div class="caba">房型</div>
                <div CLASS="cabb"></div>
            </div>
        </div>
    </form>
    <form action="">
        <div class="cb">
            <div class="cba">
                <form action="">
                    <div class="cbaa">预定信息</div>
                    <hr>
                    <div class="cbab">
                        <span>入住时间：</span>
                        <input type="text">
                        <span>离开时间：</span>
                        <input type="text">
                    </div>
                    <div class="cbac">共 <span></span>晚
                    </div>
                </form>
            </div>
            <div class="cbb">
                <div class="cbba">入住信息</div>
                <hr>
                <div class="cbbb"><span>姓&nbsp;&nbsp;&nbsp;名：</span> <input type="text" style="width: 200px;height: 30px";></div>
                <div class="cbbb"><span>电&nbsp;&nbsp;&nbsp;话：</span> <input type="text" style="width: 200px;height: 30px"></div>
                <div class="cbbb"><span>身份证：</span> <input type="text" style="width: 200px;height: 30px"></div>
                <div class="cbbb"><span>留&nbsp;&nbsp;&nbsp;言：</span><textarea name="" id="" cols="26" rows="2"></textarea></div>
                <div class="cbbc">温馨提示：请详细正确的填写内容</div>
                <div class="cbbd"><button type="submit" value="Submit">确认提交</button></div>
            </div>
        </div>
    </form>

</div>
<!--页脚-->
<div class="z">
    <div class="za">科院主题酒店
        <hr></div>
    <div class="zb">以特定的主题，来体现酒店的建筑风格和装修艺术，
        以及特定的文化氛围，如历史、文化、城市、自然、神话故事等为主题
        本酒店主以经济实惠为主! </div>
    <div class="zc">@kyjd版权所有</div>
</div>
</body>
</html>